.homework-container {
  // width: 100%;
  // min-height: 800px;
  min-width: 960px;
  height: 100%;
  background: #00f url(../../../../../images/student/homework_bg.png) no-repeat;
  background-size: 100% 100%;
  // position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;

  // margin: 0 auto;
  .homework {
    width: 900px;
    height: 550px;
    position: relative;

    // left: 50%;
    // top: 5%;
    // transform: translateX(-50%);
    // border: 1px solid red;
    .progress-line {
      position: absolute;
      left: 0;
      top: 24px;
      width: 900px;
      height: 10px;
      background: rgba(0, 183, 238, .2);
      z-index: 1;
      padding: 3px 10px;

      .progress-inline {
        width: 400px;
        height: 4px;
        background: #43A0FF;

        &.inline-1 {
          width: 25%;
        }

        &.inline-2 {
          width: 50%;
        }

        &.inline-3 {
          width: 75%;
        }

        &.inline-4 {
          width: 100%;
        }
      }
    }

    .progress-bar {
      width: 900px;
      height: 90px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      position: relative;
      z-index: 2;
      margin-bottom: 20px;

      .p-item {
        width: 60px;

        >i {
          display: block;
          width: 60px;
          height: 60px;
          background: rgba(0, 183, 238, .2);
          border-radius: 50%;
          margin-bottom: 10px;
          padding: 6px;

          b {
            display: block;
            width: 49px;
            height: 49px;
            background: url(../../../../../images/student/homework_lock_icon.png) no-repeat;
            background-size: cover;
          }
        }

        >span {
          display: block;
          width: 60px;
          height: 26px;
          padding: 3px;
          background: #aaaaaa;
          border-radius: 16px;

          b {
            display: block;
            width: 54px;
            height: 20px;
            border: 1px dashed #fff;
            line-height: 20px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            border-radius: 14px;
          }
        }

        &.activated {
          >i {
            b {
              background: url(../../../../../images/student/homework_activated_icon.png) no-repeat;
              background-size: cover;
            }
          }

          >span {
            background: #43A0FF;
          }
        }
      }

    }

    .question-container {
      width: 900px;
      height: 440px;
      background: rgba(255, 255, 255, .2);
      border-radius: 40px;
      padding: 20px;
      position: relative;
      overflow-y: scroll;

      .background_girl {
        width: 199px;
        height: 174px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: url(../../../../../images/student/my_medal.png) no-repeat;
        background-size: 100% 100%;
        z-index: 3;
        // transform: rotateY(180deg);
      }

      .question-wrap {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px;

        .fill-blank {
          .question {
            margin-bottom: 10px;
          }

          input {
            margin-bottom: 40px;
            border: none;
            outline: none;
            border-bottom: 1px solid #aaa;
            width: 800px;
            height: 70px;
            line-height: 70px;
            color: #333;
            font-size: 30px;
          }
        }

        .question {
          width: 800px;
          font-size: 30px;
          line-height: 40px;
          color: #333;
          margin-bottom: 20px;
          padding-right: 200px;
        }

        .tips {
          font-size: 30px;
          color: #333;
          line-height: 60px;
          margin-bottom: 20px;
        }

        .option {
          height: 50px;
          line-height: 50px;
          margin-bottom: 0;
          vertical-align: middle;

          .ant-radio {
            margin-right: 20px;
          }

          .ant-radio-inner {
            width: 30px;
            height: 30px;

            &::after {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              top: 5px;
              left: 5px;
            }
          }

          span {
            font-size: 24px;
            color: #333;
            vertical-align: middle;
          }
        }
      }

      .next-btn {
        display: block;
        width: 116px;
        height: 42px;
        background: url(../../../../../images/student/next_btn.png) no-repeat;
        position: absolute;
        right: 80px;
        bottom: 60px;
        cursor: pointer;
        background-size: cover;
      }
    }
  }

  .homework-result {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .7);
    z-index: 10;

    .result-bg {
      width: 300px;
      height: 300px;
      background: url(../../../../../images/student/homework_icon_bg.png) no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-bottom: 20px;
      background-size: cover;

      .homework-close {
        width: 69px;
        height: 71px;
        display: block;
        position: absolute;
        right: 15px;
        top: 15px;
        background: url(../../../../../images/student/homework_close.png) no-repeat;
        cursor: pointer;
      }

      .result {
        display: block;
        width: 200px;
        height: 180px;

        &.result-1 {
          background: url(../../../../../images/student/homework_result_1.png) no-repeat;
          background-size: cover;
        }

        &.result-2 {
          background: url(../../../../../images/student/homework_result_2.png) no-repeat;
          background-size: cover;
        }

        &.result-3 {
          background: url(../../../../../images/student/homework_result_3.png) no-repeat;
          background-size: cover;
        }

        &.result-4 {
          background: url(../../../../../images/student/homework_result_3.png) no-repeat;
          background-size: cover;
        }
      }
    }

    .btn {
      display: block;
      width: 160px;
      height: 42px;
      background: url(../../../../../images/student/homework_btn.png) no-repeat;
      cursor: pointer;
      background-size: cover;
    }

    .btn-back {
      display: block;
      width: 160px;
      height: 42px;
      background: url(../../../../../images/student/homework_back.png) no-repeat;
      cursor: pointer;
      background-size: cover;
    }
  }
}